<template>
	<view class="home">
		<!-- 计算流量弹窗 手持杆 -->
		<view class="viewHistory_flow_rate">
			<!-- 测线 -->
			<!-- 测线 -->
			<view class="measuring_box_details" v-if="this.dianfa == 3">
				<view class="box_num">
					<view class="num_i_nue" v-for="(i,index) in pointVelocityThree" :key="index">
						<view class="text_bom">
							<view class="text_aaom">
								测线{{index + 1}}
							</view>
							<view class="text_bbom">
								平均流速：{{i.aveTy}}
							</view>
						</view>
						<view class="text_top">
							<view class="text">
								<view class="text_fdlx">
									<view class="text_a">
										{{index+1}}A
									</view>
									<view class="text_b">
										{{i.a.time}}
									</view>
									<view class="text_b">
										{{i.a.nub}}
									</view>
									<view class="text_b">
										{{i.a.evenness}}
									</view>
									<view class="text_b">
										{{i.a.liusu}}
									</view>

								</view>
								<view class="text_fdlx">
									<view class="text_a">
										{{index+1}}B
									</view>
									<view class="text_b">
										{{i.b.time}}
									</view>
									<view class="text_b">
										{{i.b.nub}}
									</view>
									<view class="text_b">
										{{i.b.evenness}}
									</view>
									<view class="text_b">
										{{i.b.liusu}}
									</view>
								</view>
								<view class="text_fdlx">
									<view class="text_a">
										{{index+1}}C
									</view>
									<view class="text_b">
										{{i.c.time}}
									</view>
									<view class="text_b">
										{{i.c.nub}}
									</view>
									<view class="text_b">
										{{i.c.evenness}}
									</view>
									<view class="text_b">
										{{i.c.liusu}}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="measuringLine">
				<view class="box_num" v-if="this.dianfa == 1">
					<view class="num_i" v-for="(i,index) in pointVelocityOne" :key="index">
						<view class="text_top">
							<view class="text">
								<view class="text_a">
									测线流速：
								</view>
								<view class="text_b">
									{{i.aveTy}}
								</view>
							</view>
							<view class="text">
								<view class="text_a">
									信号数量：
								</view>
								<view class="text_b">
									{{i.nub}}
								</view>
							</view>
							<view class="text">
								<view class="text_a">
									信号时长：
								</view>
								<view class="text_b">
									{{i.time}}
								</view>
							</view>
						</view>
						<view class="text_bom">
							{{index + 1}}号测线
						</view>
					</view>
				</view>
				<view class="depth_water">
					<view class="water_a">
						水深：
					</view>
					<view class="water_b">
						<u--input @change="changeInputFn" v-model="wD" fontSize="25" border="none" color="#00ff00"
							placeholder="输入水深" type="digit"></u--input>
						<view class="water_c">
							m
						</view>
					</view>
				</view>
				<view class="depth_water_a">
					<view class="water_a" style="color: #000000;font-size: 60rpx;">
						流量：
					</view>
					<view class="water_b">
						<view class="" style="color: #00ff00;">
							{{liusliangnub}}
						</view>
						<view class="water_c">
							m³/s
						</view>
					</view>
				</view>
				<view class="depth_water_a">
					<view class="water_a" style="color: #000000;font-size: 60rpx;">
						测报人：
					</view>
					<view class="water_b">
						<u--input v-model="informant" fontSize="25" border="none" color="#00ff00"
							placeholder="输入测报人"></u--input>
					</view>
				</view>
<!-- 				<view class="depth_water_a">
					<view class="water_a" style="color: #000000;font-size: 60rpx;">
						记录人：
					</view>
					<view class="water_b">
						<u--input v-model="notekeeper" fontSize="25" border="none" color="#00ff00"
							placeholder="输入记录人"></u--input>
					</view>
				</view> -->
			</view>
			<!-- 			<view class="" style="margin-bottom: 30rpx;">
				<u-button class="custom-style" @click="calculateFlow" text="计算流量" :plain="true" shape="circle"
					color='#ffff00'></u-button>
			</view> -->
			<u-button class="custom-style" @click="trafficuploadTrafficFn" text="保存数据" :plain="true" shape="circle"
				color='#aaaaff'></u-button>

			<view class="butflx">
				<u-button class="custom-style" @click="hiddenTrafficFn" text="返回" :plain="true" shape="circle"
					color='#00ffff'></u-button>
			</view>
		</view>
		<!-- 选择测站 -->
		<!-- 抽屉断面信息列表 -->
		<uni-drawer ref="showRight" mode="left" :mask-click="false" :width="350" maskClick>
			<scroll-view style="height: 100%;" scroll-y="true">
				<view class="drawer_box">
					<!-- 标题 -->
					<uni-section class="mb-10" title="选择测站" titleFontSize="20px">
						<template v-slot:decoration>
							<view class="decoration"></view>
						</template>
					</uni-section>
					<!-- 数据内容 -->
					<view class="forbox_cezhan">
						<view v-for="(i, index) in cheZhanRange" :key="index" class="list-item"
							:class="activeIndex === index ? 'active-blue' : ''" @click="cheZHANchange(i,index)">
							{{ i.surveyStationName }}
						</view>
					</view>
					<!-- 选择站点 -->
					<uni-section class="mb-10" title="选择测段" titleFontSize="20px" v-if="stationType == 0">
						<template v-slot:decoration>
							<view class="decoration_a"></view>
						</template>
					</uni-section>
					<uni-section class="mb-10" title="选择计量点" titleFontSize="20px" v-if="stationType == 1">
						<template v-slot:decoration>
							<view class="decoration_a"></view>
						</template>
					</uni-section>
					<!-- 数据内容 -->
					<view class="forbox_cezhan">
						<view v-for="(i, index) in cheDuanRange" :key="index" class="list-item"
							:class="ceduanIndex === index ? 'active-blue_cedian' : ''" @click="zhanDIANchange(i,index)">
							{{ i.name }}
						</view>
					</view>
					<!-- 确定 -->
					<view class="" style="padding: 20rpx;margin-top: 50rpx;display: flex;align-items: center;">
						<u-button style="margin-right: 20rpx;" @click="closeDrawer" type="error" shape="circle"
							text="取消"></u-button>
						<u-button @click="uploadDrawer" throttleTime="1000" type="success" shape="circle"
							text="确定"></u-button>
					</view>

				</view>
			</scroll-view>
		</uni-drawer>
		<!-- 弹窗 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import dayjs from '@/common/dayjs.min.js'
	const SixUniTts = uni.requireNativePlugin("SmallSix-SixUniTts")
	export default {
		props: {
			objFlowData: {
				type: [Object],
				default: () => {
					return {}
				}
			},
		},
		data() {
			return {
				surveyStationName:'', //测站名称
				informant: '', // 测报人
				notekeeper: '', // 记录人
				activeIndex: null, // 当前选中项索引
				ceduanIndex: null, // 测段
				jiliangdianIndex: null, // 计量点
				cheZhanRange: [], //测站
				cheDuanRange: [], //测段
				fontSize: '20px',
				urlAlphabet: 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict',
				liusliangnub: 0, //平均总流量
				wD: 0, //水深
				pointVelocityOne: [], //测线点流速
				measuringArr: [], //测线数组
				dianfa: 0, //测量几点法
				devList: {}, //设备列表
				cezhanObj: {}, //测站信息
				stationType: null, //测站类型
				jiLiangDianRange: [], //计量点
				ssId: null, //上传测站
				sfsId: null, //上传测段
				fmpId: null, //上传计量点
				currentMeterType: null, //测量类型
			}
		},
		onShow() {

		},
		onLoad(option) {
			// 测站
		},
		onUnload() {
			console.log('卸载');
		},
		mounted() {
			// 初始化
		},
		methods: {
			// 弹窗
			toastFn(i) {
				this.$refs.uToast.show({
					type: "error",
					duration: 1500,
					message: i

				});
			},
			// 处理数据格式
			dataFormat() {
				let obj = this.vuex_cezhanInfo
				let elect = {}
				if (this.toolName == '单轨测流车') {
					elect = obj.duopuleche
					elect.cexianlist = obj.duopuleche.cexianList
				}
				if (this.toolName == '索道式测流车') {
					elect = obj.suodaoche
					elect.cexianlist = obj.suodaoche.cexianList
				}
				if (this.toolName == '轨道式测流车') {
					elect = obj.guidaoche
					elect.cexianlist = obj.guidaoche.cexianList
				}
				if (this.toolName == '计时计数器') {
					elect = obj.celiugan
					elect.cexianlist = obj.celiugan.cexianList
				}
				this.cezhanObj = elect
				console.log('选择测量仪器', this.toolName);
				console.log('原始数据', obj);
				console.log('格式化数据',elect);
			},
			// 测量数据父传子
			oNflowShowFn() {
				this.currentMeterType = this.objFlowData.currentMeterType //测量类型
				this.wD = this.objFlowData.wD //水深 
				// 几点法
				this.dianfa = this.objFlowData.dotMethod //几点法
				this.measuringArr = this.objFlowData.flowRateList //展示计算数据
				console.log('详情数据', this.objFlowData);
				// 测站
				this.dataFormat()

				if (this.dianfa == 1) {
					this.pointVelocityOne = this.objFlowData.velocityOfFlow //展示测线数据

				}
				if (this.dianfa == 3) {
					this.pointVelocityThree = this.objFlowData.velocityOfFlow //展示测线数据
				}

				// 计算
				setTimeout(() => {
					this.calculateFlow()
				}, 100)

				// 测站列表
				setTimeout(() => {
					this.deviceListFn()
				}, 200)
				// 测报人自动填写
				let obj = this.vuex_handPoleWarning
				this.informant = obj.informant, // 测报人
				this.notekeeper = obj.informant // 记录人
				console.log('流量数组*-*-*-*-*', this.objFlowData);
			},
			// 保存本地流量
			saveTrafficFn() {
				let day = dayjs(new Date()).format('YYYY-MM-DD HH:mm')
				let arr = this.vuex_handheldPoleHistory
				let obj = {
					name: this.this.surveyStationName ,
					currentMeterType: this.currentMeterType,
					aCoefficient: this.objFlowData.liusuyiData.aa, //流速仪A
					bCoefficient: this.objFlowData.liusuyiData.bb, //流速仪B
					cCoefficient: this.objFlowData.liusuyiData.cc, //流速仪C
					measuringLine: this.objFlowData.measuringLine, //测线条数
					measuringMethod: this.objFlowData.dotMethod, //点法
					depthWater: this.objFlowData.wD, //水深
					waterFlow: this.liusliangnub, //流量
					measuredData: JSON.stringify(this.objFlowData), //测量数据----------
					measuringTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm'), //测量时间
					informant: this.informant, //测报人
					notekeeper: this.informant, //测报人
				}
				arr.unshift(obj)
				uni.$u.vuex('vuex_handheldPoleHistory', arr)
			},
			// 计算后上传
			trafficuploadTrafficFn() {
				if (this.informant == '') {
					uni.showToast({
						title: '未填写完整',
						duration: 1500
					});
					return
				}
				this.$refs.showRight.open()
			},
			// 关闭抽屉
			closeDrawer() {
				this.$refs.showRight.close()
			},
			// 上传
			uploadDrawer() {
				if(this.sfsId == null && this.fmpId == null){
					uni.showToast({
						title: '未填写完整',
						duration: 1500
					});
					return
				}
				// 服务器
				if(this.stationType == 0){
					this.sectionOfSurveyFn()
				}
				if(this.stationType == 1){
					this.measureFn()
				}
				// 本地
				// this.saveTrafficFn()
				console.log('点击ID',this.ssId,this.sfsId,this.fmpId,);
				
			},
			// 返回关闭
			hiddenTrafficFn() {
				this.childMethod()
			},
			// 调用父组件隐藏
			childMethod() {
				this.$emit('fatherMethod');
			},
			// 上传历史记录
			sectionOfSurveyFn(data) {
				uni.$u.http.post('/device/current_meter_record/add', {
					"ssId": this.ssId,
					"sfsId": this.sfsId,
					"currentMeterType": this.currentMeterType,
					"aCoefficient": this.objFlowData.liusuyiData.aa, //流速仪A
					"bCoefficient": this.objFlowData.liusuyiData.bb, //流速仪B
					"cCoefficient": this.objFlowData.liusuyiData.cc, //流速仪C
					"measuringLine": this.objFlowData.measuringLine, //测线条数
					"measuringMethod": this.objFlowData.dotMethod, //点法
					"depthWater": this.objFlowData.wD, //水深
					"waterFlow": this.liusliangnub, //流量
					"measuredData": JSON.stringify(this.objFlowData), //测量数据----------
					"measuringTime": dayjs(new Date()).format('YYYY-MM-DD HH:mm'), //测量时间
					"informant": this.informant, //测报人
					"notekeeper": this.informant, //测报人
					// "data": JSON.stringify(this.devList),
					// "measuredData": JSON.stringify(this.objFlowData),
					// "quantityFlow": this.liusliangnub
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '上传成功',
							duration: 1500
						});
						let handWarning = {
							informant: this.informant,
							notekeeper: this.informant
						}
						uni.$u.vuex('vuex_handPoleWarning', handWarning)
						setTimeout(() => {
							this.childMethod()
						}, 800)
						this.$refs.showRight.close()
					} else {
						this.toastFn(res.msg)
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					this.toastFn(res.msg)
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
			measureFn(data) {
				uni.$u.http.post('/device/current_meter_record/add', {
					"ssId": this.ssId,
					"fmpId": this.fmpId,
					"currentMeterType": this.currentMeterType,
					"aCoefficient": this.objFlowData.liusuyiData.aa, //流速仪A
					"bCoefficient": this.objFlowData.liusuyiData.bb, //流速仪B
					"cCoefficient": this.objFlowData.liusuyiData.cc, //流速仪C
					"measuringLine": this.objFlowData.measuringLine, //测线条数
					"measuringMethod": this.objFlowData.dotMethod, //点法
					"depthWater": this.objFlowData.wD, //水深
					"waterFlow": this.liusliangnub, //流量
					"measuredData": JSON.stringify(this.objFlowData), //测量数据----------
					"measuringTime": dayjs(new Date()).format('YYYY-MM-DD HH:mm'), //测量时间
					"informant": this.informant, //测报人
					"notekeeper": this.informant, //测报人
					// "data": JSON.stringify(this.devList),
					// "measuredData": JSON.stringify(this.objFlowData),
					// "quantityFlow": this.liusliangnub
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						uni.showToast({
							title: '上传成功',
							duration: 1500
						});
						let handWarning = {
							informant: this.informant,
							notekeeper: this.informant
						}
						uni.$u.vuex('vuex_handPoleWarning', handWarning)
						this.$refs.showRight.close()
						setTimeout(() => {
							this.childMethod()
						}, 800)
					} else {
						this.toastFn(res.msg)
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					this.toastFn(res.msg)
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
			// 测站列表
			deviceListFn() {
				uni.$u.http.get('/device/survey_station/list').then(res => {
					if (res.code == 200) {
						console.log('res', res);
						this.cheZhanRange = res.rows
					}else{
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					this.toastFn(res.msg)
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
			// 测段信息列表
			ceduanListFn(id) {
				uni.$u.http.get('/device/steadyFlowSection/list', {
					params: {
						ssId: id
					}
				}).then(res => {
					if (res.code == 200) {
						this.cheDuanRange = res.rows
						console.log('res', res);
					}else{
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					this.toastFn(res.msg)
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
			// 计量点信息列表
			jiliangdianListFn(id) {
				uni.$u.http.get('/device/flowMeteringPoint/list', {
					params: {
						ssId: id
					}
				}).then(res => {
					if (res.code == 200) {
						this.cheDuanRange = res.rows
						// this.jiLiangDianRange = res.rows
						console.log('res', res);
					}else{
						uni.redirectTo({
							url: '/pages/login'
						});
					}
				}).catch(err => {
					this.toastFn(res.msg)
					uni.redirectTo({
						url: '/pages/login'
					});
					console.log('错误', err);
				})
			},
			// 选择测站
			cheZHANchange(i, index) {
				this.ceduanIndex = null
				this.sfsId = null
				this.fmpId = null
				this.activeIndex = index
				this.stationType = i.stationType
				this.ssId = i.id
				this.surveyStationName = i.surveyStationName
				// 测段
				if (i.stationType == 0) {
					this.ceduanListFn(i.id)
				}
				if (i.stationType == 1) {
					this.jiliangdianListFn(i.id)
				}

			},
			// 选择侧端或者计量点
			zhanDIANchange(i, index) {
				this.ceduanIndex = index
				if(this.stationType == 0){
					this.sfsId = i.id
				}
				if(this.stationType == 1){
					this.fmpId = i.id
				}
			},
			// 输入框计算
			changeInputFn() {
				this.calculateFlow()
			},
			// 计算流量
			calculateFlow() {
				if (this.wD <= 0) {
					uni.showToast({
						icon: 'error',
						title: '未获取水深',
						duration: 1500
					});
					return
				}
				let vls = this.measuringArr
				// console.log('vls', vls);
				let vlAll = []
				let vl0 = null //区域流量
				let vl1 = null //区域流量
				let vlz = null //区域流量
				let vln = null //区域流量
				let vln1 = null //区域流量
				let vln2 = null //区域流量

				// 不参与循环
				// cot
				let sin27LL = Math.sin(this.cezhanObj.lSA * Math.PI / 180)
				let cos27LL = Math.cos(this.cezhanObj.lSA * Math.PI / 180)
				let areaLL = cos27LL / sin27LL //三角面积L

				let sin27RR = Math.sin(this.cezhanObj.rSA * Math.PI / 180)
				let cos27RR = Math.cos(this.cezhanObj.rSA * Math.PI / 180)
				let areaRR = cos27RR / sin27RR //三角面积R
				// VL0
				vl0 = 0.5 * this.wD * this.wD * areaLL * (vls[0].aveTy * 1) * (this.cezhanObj.kL * 1)
				vlAll.push(vl0.toFixed(6) * 1)

				console.log('vl0', vl0);

				//VL1
				vl1 = 0.5 * [(vls[0].aveTy * 1) + (vls[0].aveTy * 1)] * (this.wD) * (this.cezhanObj.cexianlist[0].cR * 1)
				vlAll.push(vl1.toFixed(6) * 1)

				console.log('vl1', vl1);

				// 中间逻辑
				if (vls.length > 1) {
					for (let i = 0; i < vls.length - 1; i++) {
						vlz = 0.5 * [(vls[i].aveTy * 1) + (vls[i + 1].aveTy * 1)] * (this.wD) * [(this.cezhanObj
							.cexianlist[i + 1].cR * 1) - (this.cezhanObj.cexianlist[i].cR *
							1)]
						vlAll.push(vlz.toFixed(6) * 1)
					}
				}

				//VLN+1
				vln1 = 0.5 * [(vls[vls.length - 1].aveTy * 1) + (vls[vls.length - 1]
					.aveTy * 1)] * (this.wD) * [(this
					.cezhanObj.qudikuandu * 1) - (this.cezhanObj.cexianlist[vls.length - 1].cR * 1)]
				vlAll.push(vln1.toFixed(6) * 1)

				console.log('vln1---', vln1, this.cezhanObj.cexianlist);

				//VLN+2
				vln2 = 0.5 * this.wD * this.wD * areaRR * (vls[vls.length - 1].aveTy * 1) * (this.cezhanObj.kR * 1)
				vlAll.push(vln2.toFixed(6) * 1)

				console.log('vln2', vln2);

				// 计算总平均流速
				let vlQitem = []
				let vlQArr = []
				let vlQALL = []

				let sum = 0;
				for (let i = 0; i < vlAll.length; i++) {
					sum += vlAll[i];
				}
				this.liusliangnub = sum.toFixed(3) * 1
			},
			// 生Id
			nanoid(size = 21) {
				let id = ''
				let i = size
				while (i--) {
					id += this.urlAlphabet[(Math.random() * 64) | 0]
				}
				return id
			},
		}
	}
</script>
<style scoped lang="scss">
	// 上传
	.drawer_box {
		padding: 50rpx 30rpx 30rpx 30rpx;

		.decoration {
			width: 10rpx;
			height: 40rpx;
			border-radius: 15rpx;
			margin-right: 15rpx;
			background-color: #144892;
		}

		.decoration_a {
			width: 10rpx;
			height: 40rpx;
			border-radius: 15rpx;
			margin-right: 15rpx;
			background-color: #55aa7f;
		}

		.forbox_cezhan {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			.list-item {
				padding: 10rpx 20rpx;
				margin: 10rpx;
				border: 1rpx solid #eee;
				border-radius: 15rpx;
				font-size: 35rpx;
				transition: all 0.3s;
				color: #000000;
				background-color: #f3f3f3;
			}

			.active-blue {
				background-color: #144892;
				color: #fff;
			}

			.active-blue_cedian {
				background-color: #55aa7f;
				color: #fff;
			}
		}

	}

	// 计算流量
	.viewHistory_flow_rate {
		width: 700rpx;
		// height: 1600rpx;
		overflow: auto;
		// padding: 50rpx 30rpx 30rpx 30rpx;
		margin: 0 auto;
		background-color: #000000;

		.butflx {
			margin-bottom: 600rpx;
		}

		// 测线
		.measuringLine {
			.box_num {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;

				.num_i {
					width: 320rpx;
					margin: 10rpx 0;
					background-color: rgba(54, 71, 0, 0.5);
					border-radius: 20rpx;
					border: 3rpx solid rgba(170, 255, 0, 1);
					padding: 10rpx;
					box-shadow: 0 0 20rpx rgba(170, 255, 0, 1);

					.text_top {

						// font-family: 'MyFont';
						.text {
							margin-bottom: 5rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 30rpx;

							.text_a {
								color: rgba(170, 255, 0, 1);
							}

							.text_b {
								color: #000000;
								text-align: center;
								width: 160rpx;
								border-radius: 10rpx;
								background-color: rgba(170, 255, 0, 1);
							}
						}
					}

					.text_bom {
						text-align: center;
						color: rgba(255, 170, 0, 1.0);
						font-size: 35rpx;
					}
				}
			}

			// 流量
			.depth_water {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 60rpx;
				margin: 20rpx 0;
				border-radius: 10rpx;
				color: rgba(0, 0, 0, 1.0);
				border: 5rpx solid rgba(0, 255, 0, 1.0);
				background-color: rgba(0, 255, 0, 1.0);

				.water_a {
					width: 300rpx;
					text-align: center;

				}

				.water_b {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 450rpx;
					border-radius: 10rpx;
					background-color: #000000;
					padding: 5rpx 15rpx;

					.water_c {
						padding: 0 10px;
						color: rgba(0, 255, 0, 1.0);
					}
				}

			}

			.depth_water_a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 60rpx;
				margin: 20rpx 0;
				border-radius: 10rpx;
				color: rgba(0, 0, 0, 1.0);
				border: 5rpx solid rgba(0, 255, 0, 1.0);
				background-color: rgba(0, 255, 0, 1.0);

				.water_a {
					width: 300rpx;
					text-align: center;

				}

				.water_b {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 450rpx;
					border-radius: 10rpx;
					background-color: #000000;
					padding: 5rpx 15rpx;

					.water_c {
						padding: 0 10px;
						color: rgba(0, 255, 0, 1.0);
					}
				}

			}
		}

		.custom-style {
			margin-top: 30rpx;
			background-color: #2f2f2f;
		}
	}

	//历史纪律详情
	.measuring_box_details {
		// width: 700rpx;
		// height: 1600rpx;
		overflow: auto;
		padding: 20rpx;
		margin: 0 auto;
		background-color: #000000;

		.flx_butflx {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 100rpx;
		}

		.box_pp {
			display: flex;
			align-items: flex-end;
			justify-content: center;
			color: #ffff00;
			// background-color: #ffff00;
			border-radius: 20rpx;
			font-size: 50rpx;
		}

		.box_num {
			// display: flex;
			// align-items: center;
			// justify-content: space-between;
			// flex-wrap: wrap;

			.num_i_nue {
				// width: 320rpx;
				margin: 10rpx 0;

				border-radius: 20rpx;
				padding: 10rpx;
				box-shadow: 0 0 20rpx rgba(255, 255, 0, 1.0);

				.text_top {
					background-color: rgba(255, 255, 0, 1.0);
					border-radius: 20rpx;

					.text {
						// margin-bottom: 10rpx;
						// display: flex;
						// justify-content: space-between;
						// align-items: center;

						// font-size: 30rpx;
						.text_fdlx {
							margin-top: 10rpx;
							padding: 10rpx;
							border-radius: 10rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							background-color: rgba(255, 255, 0, 1.0);

							color: rgba(255, 255, 0, 1.0);

							.text_a {
								width: 100rpx;
								text-align: center;
								color: rgba(0, 0, 0, 0.8);
							}

							.text_b {
								width: 130rpx;
								border-radius: 5rpx;
								background-color: rgba(0, 0, 0, 1);
								text-align: center;
							}
						}

					}
				}

				.text_bom {
					// text-align: center;
					color: rgba(255, 255, 0, 1.0);
					font-size: 30rpx;
					// margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.text_aaom {
						// color: rgba(0, 0, 0, 1.0);
					}

					.text_bbom {
						color: rgba(0, 0, 0, 1.0);
						border-radius: 5rpx;
						padding: 0rpx 10rpx;
						background-color: rgba(255, 255, 0, 1.0);
					}
				}
			}
		}

		.box_ff {
			margin: 20rpx 0;
			font-family: 'MyFont';
			font-size: 60rpx;
			color: rgba(255, 255, 0, 1.0);
			border-radius: 20rpx;
			border: 3rpx solid rgba(255, 255, 0, 1.0);
			padding: 10rpx;
			box-shadow: 0 0 20rpx rgba(255, 255, 0, 1.0);
		}

	}
</style>
<style>
	.u-picker__view__column__item {
		background-color: #cbe4ef !important;
	}

	.u-line-1 span {
		color: #000000;
		font-size: 50rpx;
	}

	page {
		background-color: #f3f3f3;
	}

	@font-face {
		font-family: 'MyFont';
		src: url('@/static/fonts/LED.otf');
	}

	@font-face {
		font-family: 'qingyuan';
		src: url('@/static/fonts/qingyuan.ttf');
	}
</style>